<template>
  <div :class="['dynamic', $ua.isFromPc() ? 'z-web' : 'z-phone']">
    <!-- <client-only> -->
      <div class="dynamic-banner">
        <img :src="bannerList?.url" alt="">
      </div>
    <!-- </client-only> -->
    <!-- 文章和专题tab -->
    <div class="tab">
      <div :class="['article', 'all-center', active == 0 ? 'active-article' : '']" @click="jump(0)">
        新闻动态
      </div>
      <div :class="['activity', 'all-center', active == 1 ? 'active-activity' : '']" @click="jump(1)">
        专题活动
      </div>
      <Article :essay="essay" :essayTotal="essayTotal" v-show="active == 0" @getEssay="getEssay" />
      <Activity v-show="active == 1" />
    </div>
  </div>
</template>

<script>
import Article from './components/article.vue'
import Activity from './components/activity.vue'
import { getImgUrl } from '@/utils/downloadFile'

export default {
  scrollToTop: true,
  name: 'dynamic',
  components: {
    Article,
    Activity
  },
  props: {

  },
  data() {
    return {
      active: 0,
      essay: [],
      essayTotal: -1,
      bannerList: {},
      page_num: 0,
      page_count: 5
    }
  },
  created() {

  },
  mounted() {
    // this.customScrollTop()
    this.getEssay()
    console.log(this.$store.state.router.router[0].children, location.pathname)
    this.bannerList = this.$store.state.router.router[0].children.filter(item => {
      return item.path == location.pathname
    })[0]?.meta?.banner_list[0]
    console.log('this.bannerList', this.bannerList)
  },
  methods: {
    getImgUrl,
    jump(value) {
      this.active = value
    },
    // 获取文章列表
    getEssay() {
      this.page_num++
      const params = {
        page_num: this.page_num,
        page_count: this.page_count
      }
      this.$api.getEssay({ ...params }).then(res => {
        if (res.status == '$SUCCESS') {
          let essay = Array.isArray(res.result.item_list) ? res.result.item_list : []
          this.essayTotal = res.result.total_count
          essay.forEach(item => {
            this.essay.push(item)
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .dynamic {
    &.z-web {
      // width: 100%;
      .dynamic-banner {
        width: 100%;
        height: 600px;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      ::v-deep(.el-carousel__indicators--outside) {
        display: none;
      }

      .all-center {
        margin-bottom: 70px;
      }

      .tab {
        text-align: center;
        padding: 60px 276px 80px;
        background: #fff;

        .article,
        .activity {
          width: 401px;
          height: 61px;
          background: #FFF;
          border: 1px solid #E4E4E4;
          cursor: pointer;
          font-size: 22px;
        }

        .active-activity {
          border: 1px solid #333;
          font-weight: 800;
        }

        .active-article {
          border: 1px solid #333;
          font-weight: 800;
        }

        .article {
          margin-right: 35px;
        }
      }
    }

    &.z-phone {
      .dynamic-banner {
        width: 100%;
        height: pxtorem(388);

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .tab {
        text-align: center;
        padding: pxtorem(40) pxtorem(24) pxtorem(80);
      }
      .article,
      .activity {
        width: pxtorem(110);
        display: inline-block;
        font-size: pxtorem(24);
        font-weight: bold;
        color: #898989;
        flex: 25%;
        text-align: center;
        margin-bottom: pxtorem(34);
        // margin-right: pxtorem(78);

        &.active-article,
        &.active-activity {
          color: #000;
          position: relative;
        }

        &.active-article::after,
        &.active-activity::after {
          content: '';
          width: pxtorem(52);
          height: pxtorem(4);
          background-color: #000;
          position: absolute;
          bottom: pxtorem(-6);
          left: pxtorem(30);
        }
      }

      .article {
        margin-right: pxtorem(108);
      }
    }
  }
</style>
